<template>
    <ul>
        <li v-for="item in comments" :key="item.id">
            <b>{{item.content}}</b>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</template>
<script>
import { mapActions,mapState } from 'vuex';
import * as api from "@/api/comment"
    export default{
        methods:{
            ...mapActions("comment",["FETCH_COMMENT"]),
            async del(id){
                //调用删除接口，传递当前数据的id
                let res = await api.delComment(id)
                console.log(res)
                if(res.data.state){
                    //删除之后重新获取评论数据，更新视图
                    this.FETCH_COMMENT()
                }
            }
        },
        computed:{
            ...mapState("comment",["comments"])
        },
        created(){
            this.FETCH_COMMENT()
        }
    }
</script>